<template>
  <div class="bg">
    <div class="list">
      <div class="range"></div>
      <div class="list-title">
        <div class="title-img"><img src="../images/icon_mine.png" alt="" /></div>
        <div class="title-ct">
          <span>收货人：{{ pageAddress.contact }}</span>
          <span class="number">{{ pageAddress.contactPhone }}</span>
          <div class="title-font">
            <span>收货地址：</span>
            <span>
              {{ pageAddress.city }}{{ pageAddress.province }}
              {{ pageAddress.street }}{{ pageAddress.area }}{{ pageAddress.address }}
            </span>
          </div>
        </div>
      </div>
      <div class="lst-ct" v-link="'/buy-address?back=1'">
        <div class="lstimg">
          <span class="ct-img sureImg" ></span>
        </div>
      </div>
      <div class="range"></div>
    </div>

    <div class="listDetails">
      <p> 订单详情 </p>
      <div class="detailsContent">
        <h4>{{ products.goodsName }}</h4>
        <div class="times">
          <div class="title-color">订单号：</div>
          <div class="title-rt">{{ pageNum }}</div>
        </div>
        <div class="times">
          <div class="title-color">型号：</div>
          <div class="title-rt">{{ products.goodsModel }}</div>
        </div>
      </div>
      <div class="detailsMoney">
        <span>{{ products.goodsPrice/100 | currency "" }}元
          /{{ products.goodsUnits }}</span>
      </div>
      <div v-if="cid !== ''">
        <div class="detailsContent">
          <h4>{{ getPackage.details }}</h4>
          <div class="conter">{{ getPackage.goodsDescribe }}</div>
        </div>
        <div class="detailsMoney"><span>{{ getPackage.goodsPrice/100 | currency ""}}元/套</span></div>
      </div>
    </div>

    <div class="listManner">
      <div class="times">
        <div class="title-color">配送方式</div>
        <div class="title-rt">快递</div>
      </div>
      <div class="times">
        <div class="title-color">运费：</div>
        <div class="title-rt" v-if="this.products.goodsFreight === 0">免费运</div>
        <div class="title-rt" v-else>{{ products.goodsFreight/100 | currency "" }}元</div>
      </div>
      <div class="times">
        <div class="title-color">发票信息</div>
        <select class="chooseInvoice" name="" @change="invoice($event)">
          <option value="个人">电子发票（个人）</option>
          <option value="公司">电子发票（公司）</option>
        </select>
      </div>
      <div style="clear: both;"></div>
      <input type="text" name="name" value="" class="chooseCompany" placeholder="请输入公司名称">
    </div>

    <div class="address">
      <div class="money">
        <p v-if="!getPackage.goodsPrice">￥{{ products.goodsFreight + products.goodsPrice/100 | currency "" }}元</p>
        <p v-else>￥{{ products.goodsFreight/100 + products.goodsPrice/100 + getPackage.goodsPrice/100 | currency "" }}元/套</p>
        <span>{{ products.goodsDescribe }}</span>
      </div>
      <div class="address-bt"  @touchend="payment">
        <button type="button">结&nbsp;&nbsp;算</button>
      </div>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        id: this.$route.query.id,
        cid: this.$route.query.curId,
        price: this.$route.query.price,
        loading: false,
        dialog: false,
        products: {},
        pageAddress: [],
        getPackage: [],
        getDate: '',
        pageNum: "",
        orderDetJson: [this.$route.query.id, this.$route.query.curId],
        invoiceType: '个人',
        companyName: ''
      };
    },
    methods: {
      invoice (e) {
        console.info(e);
        let company = document.querySelector('.chooseCompany');
        let value = e.target.value;
        this.invoiceType = value;
        if (value === '公司') {
          company.style.display = 'block';
        } else {
          company.style.display = 'none';
        }
      },
      async payment() {
        if (this.invoiceType === '公司') {
          this.companyName = document.querySelector('.chooseCompany').value;
        } else {
          this.companyName = '';
        }
        if (this.pageAddress <= 0) {
          alert("请选择地址！");
          return;
        } else {
          let pay = await AJAX.orderPay({
            openid: this.$root.openId,
            goodsName: this.products.goodsName, // 商品名称
            orderDetJson: JSON.stringify(this.orderDetJson), // 订单详情
            consigneeName: this.pageAddress.contact, // 收货人
            consigneePhone: this.pageAddress.contactPhone, // 收货人手机号
            consigneeAddress: this.pageAddress.province + this.pageAddress.city
            + this.pageAddress.area + this.pageAddress.address, // 收货地址
            invoiceType: this.invoiceType, // 发票类型
            companyName: this.companyName // 单位名称
          });
          window.location.href = "https://pay.swiftpass.cn/pay/jspay?token_id="
          + pay.resInfo + "&showwxpaytitle=1";
        }
      }
    },
    async ready() {
      let getOuttradeno = await AJAX.getOuttradeno("openid=" + this.$root.openId);
      let inquireRecord = await AJAX.inquireRecord(this.$root.openId); // 地址
      for (let v of inquireRecord) {
        if (v.isDefault === '1') {
          this.pageAddress = v;
          break;
        }
      }
      console.info(this.pageAddress);
      let getGoodsInfo = await AJAX.getGoodsInfo(this.id);
      this.products = getGoodsInfo;
      this.pageNum = getOuttradeno.resInfo;
      let productSetMeal = await AJAX.productSetMeal(this.id); // 获取套餐
      for (let v of productSetMeal) {
        if (v.id === parseInt(this.cid, 10)) {
          this.getPackage = v;
        }
      }
      if (this.getPackage.goodsSum > 11) {
        this.getPackage.goodsDate = parseInt(this.getPackage.goodsSum / 12, 10) + '年';
        let Remainder = this.getPackage.goodsSum % 12;
        if (Remainder !== 0) {
          this.getPackage.goodsDate += Remainder + '月';
        }
      } else {
        this.getPackage.goodsDate = this.getPackage.goodsSum + '月';
      }
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .list{
    font-size: .6rem;
    color:#404040;
    background-color: #fff;
    position: relative;
    .list-title{
      float: left;
      width:88%;
      line-height: 1rem;
      padding:.5rem 0 .5rem .3rem;
      position: relative;
      .title-img{
        float: left;
        width:10%;
      }
      .title-ct{
        float:left;
        width:90%;
        .number{
          text-align: right;
          position: absolute;
          right: .5rem;
        }
      }
      .title-font{
        clear: both;
      }
      img{
        width:1rem;
        height:1rem;
        vertical-align:middle;
      }
    }

    .lst-ct{
      position: absolute;
      right:3.5%;
      top:32%;
      width: 10%;
      padding-left: .6rem;
      span{
        display: block;
        width:1.2rem;
        height:1.2rem;
      }
    }
  }

  .listDetails{
    background-color: #fff;
    color:#404040;
    clear: both;
    font-size: .6rem;
    p{
      padding:.3rem .5rem;
      border-bottom: 1px solid #e6e6e6;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .detailsContent{
      h4{
        font-weight: normal;
        padding:.1rem .8rem;
        font-size: .7rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .conter{
        padding:.1rem .8rem;
      }
      .times{
        clear: both;
        height:1.2rem;
        padding:.1rem;
        background-color: #fff;
        .title-color{
          position: absolute;
          left: .8rem;
        }
        .title-rt{
          position: absolute;
          right: .5rem;
        }
      }
    }
    .detailsMoney{
      height:1.5rem;
      width:100%;
      background-color: #F6F6F6;
      position: relative;
      span{
        position: absolute;
        right: 0;
        color:#15A1D6;
        padding:.3rem;
      }
    }
  }

  .listManner{
    font-size: .6rem;
    padding-bottom: 15rem;
    background-color: #fff;
    margin-top: .5rem;
    .times{
      clear: both;
      height:1.2rem;
      padding:.1rem;
      background-color: #fff;
      .title-color{
        position: absolute;
        left: .5rem;
      }
      .title-rt{
        position: absolute;
        right: .5rem;
      }
    }
  }

  .sureImg{
    background-image: url(../images/icon_go.png);
    background-size: 100% auto;
  }

  .range{
    clear: both;
    height:.3rem;
    background-color: #EBEBEB;
  }

  .address{
    position: fixed;
    border-top: 1px solid #e6e6e6;
    bottom: 0;
    width:100%;
    height:3rem;
    background-color: #fff;
    .money{
      position: fixed;
      left:.5rem;
      width:60%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      p{
        color:#15A1D6;
        padding-top: .3rem;
        font-size: .7rem;
      }
      span{
        font-size: .6rem;
        color:#ccc;
      }
    }
    .address-bt button{
      position: fixed;
      right:0;
      height: 3rem;
      width:30%;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
  .chooseInvoice {
    float: right;
    border: 1px solid #999;
    margin: 0 .4rem 0 0;
    font-size: .7rem;
  }
  .chooseCompany {
    display: none;
    border: 1px solid #999;
    float: right;
    background: #fff;
    width: 60%;
    margin: .5rem .5rem 0 0;
    padding: .2rem;
    font-size: .6rem;
  }
</style>
